<template>
  <div class="drawer_container">
    <div v-if="drawerType === 'grid'">
      <div class="drawer_title">{{ $t('画布背景设置') }}</div>
      <div class="drawer_wrap">
        <el-form label-position="left" label-width="85px">
          <el-form-item :label="$t('是否显示网格')" label-width="100px">
            <el-switch v-model="showGrid" @change="isShowGrid" />
          </el-form-item>
          <div v-show="showGrid">
            <el-form-item :label="$t('网格类型')">
              <el-radio-group v-model="grid.type" @change="changeGridType">
                <el-radio v-for="item in gridTypeList" :key="item.value" :label="item.value">
                  <span>{{ $t(item.label) }}</span>
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('网格大小')">
              <el-slider v-model="grid.size" :min="0" :max="30" @change="changeGrid" />
            </el-form-item>
            <el-form-item :label="$t('网格颜色')">
              <el-color-picker v-model="grid.args.color" @change="changeGrid" />
            </el-form-item>
            <el-form-item :label="$t('网格线宽度')">
              <el-slider v-model="grid.args.thickness" :min="0" :max="20" @change="changeGrid" />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div v-if="drawerType === 'node'">
      <div class="drawer_title">{{ $t('节点设置') }}</div>
      <div class="drawer_wrap">
        <el-form label-position="top" label-width="100px">
          <!--普通更改-->
          <el-form-item :label="$t('节点文本')">
            <el-input v-model="drawerNode.nodeText" style="width:100%;" @input="changeNodeText" />
          </el-form-item>
          <el-form-item :label="$t('字体大小')">
            <el-slider v-model="drawerNode.fontSize" :min="10" :max="20" @change="changefontSize" />
          </el-form-item>
          <el-form-item :label="$t('字体颜色')">
            <el-color-picker v-model="drawerNode.fontFill" @change="changeFontFill" />
          </el-form-item>
          <el-form-item :label="$t('边框宽度')">
            <el-slider v-model="drawerNode.strokeWidth" :min="0" :max="10" @change="changeStrokeWidth" />
          </el-form-item>
          <el-form-item :label="$t('边框颜色')">
            <el-color-picker v-model="drawerNode.stroke" @change="changeStroke" />
          </el-form-item>
          <el-form-item :label="''">
            <el-button type="primary" icon="md-trending-up" @click="toTopZIndex">{{ $t('置顶') }}</el-button>
            <el-button type="error" class="margin-left-10" icon="md-trash" @click="deleteNode">{{ $t('删除') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-if="drawerType === 'edge'">
      <div class="drawer_title">{{ $t('线条设置') }}</div>
      <div class="drawer_wrap">
        <el-form label-position="top" label-width="100px">
          <el-form-item :label="$t('线条文本')">
            <el-input v-model="drawerEdge.EdgeText" style="width:100%;" onkeypress="if (event.keyCode === 13) return false" @change="changeEdgeText" />
          </el-form-item>
          <el-form :label="$t('线条宽度')">
            <el-slider v-model="drawerEdge.edgeWidth" :min="1" :max="10" @change="changeEdgeWidth" />
          </el-form>
          <el-form :label="$t('线条颜色')">
            <el-color-picker v-model="drawerEdge.edgeColor" @change="changeEdgeColor" />
          </el-form>
          <el-form :label="$t('功能')">
            <el-button type="primary" icon="md-trending-up" @click="toTopZIndex">{{ $t('置顶') }}</el-button>
            <el-button type="error" class="margin-left-10" icon="md-trash" @click="deleteNode">{{ $t('删除') }}</el-button>
          </el-form>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'RightDrawer',
  props: {
    drawerType: {
      type: String,
      default: () => 'grid'
    },
    selectCell: {
      type: Object,
      default: () => {}
    },
    graph: {
      type: Object,
      default: () => undefined
    },
    grid: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      gridTypeList: [
        {
          label: this.$t('矩形'),
          value: 'mesh'
        },
        {
          label: this.$t('点状'),
          value: 'dot'
        }
      ],
      showGrid: false,
      drawerNode: {
        fill: '',
        nodeText: '',
        fontSize: null,
        fontFill: '',
        strokeWidth: null,
        stroke: ''
      },
      // 天眼查查询条件
      tycParam: {
        id: '',
        companyName: '',
        tycId: ''
      },
      // 查询是否存在条件
      existParam: {
        companyName: '',
        id: ''
      },
      drawerEdge: {
        EdgeText: '',
        edgeWidth: null,
        edgeColor: ''
      }
    }
  },
  watch: {
    selectCell: {
      handler(val) {
        if (val) {
          if (val.isNode()) { // 节点
            this.drawerNode.fill = val.store.data.attrs.body.fill
            this.drawerNode.nodeText = val.store.data.attrs.label.text
            this.drawerNode.fontFill = val.store.data.attrs.label.fill
            this.drawerNode.fontSize = Number(val.store.data.attrs.label.fontSize)
            this.drawerNode.strokeWidth = Number(val.store.data.attrs.body.strokeWidth)
            this.drawerNode.stroke = val.store.data.attrs.body.stroke
          } else { // 边
            this.drawerEdge.EdgeText = val.store.data.labels ? val.store.data.labels[0].text : ''
            this.drawerEdge.edgeWidth = Number(val.store.data.attrs.line.strokeWidth)
            this.drawerEdge.edgeColor = val.store.data.attrs.line.stroke
          }
          this.$forceUpdate()// 强制更新
        }
      },
      immediate: true,
      yesNoOptions: [],
      deep: false
    }
  },
  created() {
    this.getDicts('sys_yes_no').then(response => {
      this.yesNoOptions = response.data
    })
  },
  mounted() {
  },
  methods: {
    // 网格设置
    isShowGrid() {
      if (this.graph !== undefined) {
        this.showGrid ? this.graph.showGrid() : this.graph.hideGrid()
      }
    },
    changeGridType(e) {
      this.grid.type = e
      this.changeGrid()
    },
    changeGrid() {
      if (this.graph !== undefined) {
        if (!this.showGrid) {
          this.grid.args.color = '#ffffff'
        }
        this.graph.drawGrid({
          ...this.grid
        })
      }
    },
    // 节点设置
    changeStrokeWidth(val) {
      this.selectCell.attr('body/strokeWidth', val)
    },
    changefontSize(val) {
      this.selectCell.attr('label/fontSize', val)
    },
    changeNodeText() {
      this.selectCell.attr('label/text', this.drawerNode.nodeText)
    },
    changeStroke(val) {
      this.drawerNode.stroke = val
      this.selectCell.attr('body/stroke', this.drawerNode.stroke)
    },
    changeFontFill(val) {
      this.drawerNode.fontFill = val
      this.selectCell.attr('label/fill', this.drawerNode.fontFill)
    },
    changeFill(val) {
      this.drawerNode.fill = val
      this.selectCell.attr('body/fill', val)
    },
    // 边设置
    changeEdgeText() {
      this.selectCell.setLabels(
        [{ attrs: { label: { text: this.drawerEdge.EdgeText }}}]
      )
    },
    changeEdgeWidth(val) {
      this.drawerEdge.edgeWidth = val
      this.selectCell.attr('line/strokeWidth', this.drawerEdge.edgeWidth)
    },
    changeEdgeColor(val) {
      this.drawerEdge.stroke = val
      this.selectCell.attr('line/stroke', this.drawerEdge.stroke)
    },
    // 置顶
    toTopZIndex() {
      this.selectCell.toFront()
    },
    // 删除
    deleteNode() {
      this.$emit('deleteNode')
    }
  }
}
</script>

<style scoped>
.drawer_container {
  width: 400px !important;
}

.drawer_title {
  border-bottom: 1px solid #e8eaec;
  box-sizing: border-box;
  padding: 14px 16px;
  color: #333;
  font-size: 16px;
}

.drawer_wrap {
  width: 250px;
  box-sizing: border-box;
  padding: 20px 10px 20px 20px;
}

/deep/ .el-radio-group {
  display: flex !important;
}

/deep/ .el-radio {
  top: 11px !important
}

/deep/ .drawer_wrap {
  width: 100%;
  height: 714px;
  overflow: auto;
}
</style>
